<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/product-list.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #333;
            color: white;
        }

        header h1 {
            margin: 0;
        }

        header a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            border-radius: 5px;
        }

        header a:hover {
            background-color: #555;
        }

        .product-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            list-style-type: none;
            padding: 0;
        }

        .product-list li {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin: 10px;
            padding: 15px;
            width: 220px; /* Adjusted width for better layout */
            text-align: center;
            transition: box-shadow 0.3s ease, transform 0.3s ease; /* Added transform for hover effect */
        }

        .product-list li:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            transform: translateY(-5px); /* Slight lift effect on hover */
        }

        img {
            max-width: 100%;
            max-height: 150px; /* Set maximum height for consistency */
            object-fit: contain; /* Maintain aspect ratio */
            border-radius: 5px;
        }

        .add-to-cart {
            background-color: #28a745; /* Green color */
            color: white;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: auto; /* Push button to bottom */
        }

        .add-to-cart:hover {
            background-color: #218838; /* Darker green on hover */
        }

        .product-description {
            margin-top: 10px; /* Space between button and description */
            font-size: 14px; /* Font size for description */
            color: #666; /* Grey color for description */
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border-radius: 8px; /* Rounded corners for modal */
            width: 80%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <header>
        <h1>手机</h1>
        <nav>
            <a href="index.html">首页</a>
            <a href="cart.html">我的购物车</a>
            <a href="user-center.html">用户中心</a>
        </nav>
    </header>

    <ul class="product-list">
        <li>
            <img src="./images/手机/iPhone 14 Pro.jpg" alt="iPhone 14 Pro">
            <h3>iPhone 14 Pro</h3>
            <p>价格：8999元</p>
            <p>详细信息：A15芯片，6.7英寸Super Retina XDR屏，ProMotion技术，128GB-512GB存储，5G，Face ID。</p>
            <button class="add-to-cart" onclick="addToCart('iPhone 14 Pro', 8999)">加入购物车</button>
        </li>
        <li>
            <img src="./images/手机/iPhone 15 Pro Max.jpg" alt="iPhone 15 Pro Max">
            <h3>iPhone 15 Pro Max</h3>
            <p>价格：9999元起</p>
            <p>详细信息：A16芯片，6.7英寸Super Retina XDR屏，120Hz刷新率，256GB-1TB存储，5G，Face ID。</p>
            <button class="add-to-cart" onclick="addToCart('iPhone 15 Pro Max', 9999)">加入购物车</button>
        </li>
        <li>
            <img src="./images/手机/iQOO 12 Pro.jpg" alt="iQOO 12 Pro">
            <h3>iQOO 12 Pro</h3>
            <p>价格：4999元起</p>
            <p>详细信息：高通骁龙芯片，6.78英寸AMOLED屏，120Hz刷新率，128GB-512GB存储，5G，屏下指纹。</p>
            <button class="add-to-cart" onclick="addToCart('iQOO 12 Pro', 4999)">加入购物车</button>
        </li>
        <li>
            <img src="./images/手机/OPPO Find X5.jpg" alt="OPPO Find X5">
            <h3>OPPO Find X5</h3>
            <p>价格：8999元</p>
            <p>详细信息：6.55英寸AMOLED屏，120Hz刷新率，HDR10+，高通骁龙芯片，256GB-512GB存储，5G，屏下指纹。</p>
            <button class="add-to-cart" onclick="addToCart('OPPO Find X5', 8999)">加入购物车</button>
        </li>
        <li>
            <img src="./images/手机/realme GT 2 Pro.jpg" alt="realme GT 2 Pro">
            <h3>realme GT 2 Pro</h3>
            <p>价格：3999元起</p>
            <p>详细信息：高通骁龙芯片，6.43英寸AMOLED屏，120Hz刷新率，128GB-512GB存储，5G，屏下指纹。</p>
            <button class="add-to-cart" onclick="addToCart('realme GT 2 Pro', 3999)">加入购物车</button>
        </li>
        <li>
            <img src="./images/手机/Redmi K70.jpg" alt="Redmi K70">
            <h3>Redmi K70</h3>
            <p>价格：2999元起</p>
            <p>详细信息：高通骁龙芯片，6.67英寸AMOLED屏，120Hz刷新率，128GB-512GB存储，5G，屏下指纹。</p>
            <button class="add-to-cart" onclick="addToCart('Redmi K70', 2999)">加入购物车</button>
        </li>
        <li>
            <img src="./images/手机/vivo X100s Pro.jpg" alt="vivo X100s Pro">
            <h3>vivo X100s Pro</h3>
            <p>价格：6999元起</p>
            <p>详细信息：高通骁龙芯片，6.78英寸AMOLED屏，120Hz刷新率，256GB-512GB存储，5G，屏下指纹。</p>
            <button class="add-to-cart" onclick="addToCart('vivo X100s Pro', 6999)">加入购物车</button>
        </li>
        <li>
            <img src="./images/手机/vivo X200.jpg" alt="vivo X200">
            <h3>vivo X200</h3>
            <p>价格：5999元起</p>
            <p>详细信息：高通骁龙芯片，6.56英寸AMOLED屏，120Hz刷新率，128GB-512GB存储，5G，屏下指纹。</p>
            <button class="add-to-cart" onclick="addToCart('vivo X200', 5999)">加入购物车</button>
        </li>
        <li>
            <img src="./images/手机/vivo X80.jpg" alt="vivo X80">
            <h3>vivo X80</h3>
            <p>价格：3499元起</p>
            <p>详细信息：高通骁龙芯片，6.56英寸AMOLED屏，120Hz刷新率，128GB-512GB存储，5G，屏下指纹。</p>
            <button class="add-to-cart" onclick="addToCart('vivo X80', 3499)">加入购物车</button>
        </li>
    </ul>
    <div id="cart">
        <!-- 购物车界面内容 -->
    </div>
    <script>
        function addToCart(productName, price) {
            let cart = JSON.parse(localStorage.getItem('cart')) || [];
            
            // 检查商品是否已经在购物车中
            const existingProductIndex = cart.findIndex(item => item.productName === productName);
            
            if (existingProductIndex > -1) {
                // 如果已经存在，则增加数量
                cart[existingProductIndex].quantity += 1;
            } else {
                // 如果不存在，则添加新商品
                cart.push({ productName, price, quantity: 1 });
            }
            
            localStorage.setItem('cart', JSON.stringify(cart));
            
            alert(`${productName} 已添加到购物车！`);
            updateCartUI(); // 调用更新购物车界面的函数
        }

        function updateCartUI() {
            // 获取购物车数据
            let cart = JSON.parse(localStorage.getItem('cart')) || [];
            
            // 获取购物车界面的容器
            const cartContainer = document.getElementById('cart');
            cartContainer.innerHTML = ''; // 清空当前内容
            
            // 如果购物车为空，显示提示信息
            if (cart.length === 0) {
                cartContainer.innerHTML = '<p>购物车为空</p>';
                return;
            }
            
            // 创建购物车商品列表
            const ul = document.createElement('ul');
            cart.forEach(item => {
                const li = document.createElement('li');
                li.textContent = `${item.productName} - ￥${item.price} x ${item.quantity}`;
                ul.appendChild(li);
            });
            cartContainer.appendChild(ul);
        }

        // 页面加载时更新购物车界面
        window.onload = updateCartUI;
    </script>
</body>
</html>